<template>
  <div class="flex-column">
    <!-- 其他项目 -->
    <!-- 遍历提前制定好的规则数据 -->
    <div v-for="(i, index) in curTableData.baseInfo" :key="activeTabs+'-'+index" :class="{' flex-center': i.label === '平台'}" class="medium-data-item">
      <span class="title">{{ i.label }}:</span>
      <template v-if="i.label === '平台' && baseInfo[i.key]">
        <platformIcon :data="baseInfo[i.key]" />
      </template>
      <span v-if="i.key !== 'accountId'" class="name">
        <template v-if="i.role === 'thousandFormat' && (baseInfo[i.key] || baseInfo[i.key] === 0)">
          {{ baseInfo[i.key] | numFormat(true,1,'万') }}
        </template>
        <template v-else-if="i.role === 'numFormat' && (baseInfo[i.key] || baseInfo[i.key] === 0)">
          {{ baseInfo[i.key] | numFormat(true,1,'万') }}
        </template>
        <template v-else-if="(baseInfo[i.key])">
          {{ baseInfo[i.key] }}
        </template>
        <template v-else>
          --
        </template>
      </span>
      <span v-if="i.key === 'accountId' && baseInfo[i.key].indexOf('http') < 0" :title="baseInfo[i.key]" class="name">
        {{ baseInfo[i.key] }}
      </span>
      <a
        v-if="i.key === 'accountId' && baseInfo[i.key].indexOf('http') >= 0"
        :href="baseInfo[i.key]"
        target="_blank"
        class="name link-name">
        点击跳转<img src="../../../assets/medium/link.png" alt="">
      </a>
    </div>
    <div v-for="(item, index) in baseInfo.dynamicKey" :key="index" class="medium-data-item">
      <span class="title">{{ item.name }}:</span>
      <span v-if="item.options && item.options.length > 0" :title="formatValue(item)" class="name">{{ formatValue(item) }}</span>
      <span v-else :title="item.value" class="name">{{ item.value || '--' }}</span>
      <!--
      <el-tooltip effect="dark" placement="top">
        <div slot="content">{{ item.name }}</div>
        <div class="dynamic-row">
          <div class="title dynamic-title">{{ item.name }}</div>
          <div class="dynamic-colon">:</div>
          <div v-if="item.options && item.options.length > 0" class="name">{{ formatValue(item) }}</div>
          <div v-else class="name">{{ item.value || '--' }}</div>
        </div>
      </el-tooltip>
       -->
    </div>
  </div>
</template>

<script>
import { TableData } from '@/views/medium/mixin/mediumData';
import platformIcon from '@/components/Common/platformIcon';
import { numFormat, thousandFormat } from '@/filters/number';
export default {
  filters: { thousandFormat, numFormat },
  components: { platformIcon },
  props: {
    activeTabs: {
      type: String,
      default: ''
    },
    baseInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      TableData
    };
  },
  computed: {
    curTableData() {
      // 如果么有对应的 activeTabs 数据，则使用更多tab的数据 this.TableData['5']
      return this.TableData[this.activeTabs] || this.TableData['5'];
    }
  },
  methods: {
    stringToArray(tags) {
      try {
        if (tags && tags !== '') {
          const tagsArr = tags.split(',');
          const isBaby = tagsArr.includes('母婴');
          const result = tagsArr.filter(i => {
            return i !== '母婴';
          });
          if (isBaby) result[result.length] = '母婴';
          return result;
        } else {
          return [];
        }
      } catch (error) {
        return [];
      }
    },
    formatValue(data) {
      let res = '--';
      if (data.options && data.options.length > 0) {
        data.options.forEach(item => {
          if (data.value === item.value) res = item.label;
        });
      }
      return res;
    }
  }
};
</script>
<style lang="scss" scoped>

.flex-column {
  display: flex;
  flex-direction: column;
}
.medium-data-user {
  display: flex;
  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    overflow: hidden;
    border: 1px solid #eee;
    margin-right: 10px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 36px;
    background:linear-gradient(167deg,rgba(116,167,255,1) 0%,rgba(64,110,255,1) 100%);
    flex-shrink: 0;
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  .medium-data-user-info {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    .user-name {
      font-size: 14px;
      color: #333333;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 1.3;
    }
  }
}
.keep-all {
  word-break:keep-all;
}
</style>
